<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
      @onCreated="handleCreated" @onChange="handleChange" />
  </div>
</template>

<script lang="ts" name="WangEditor">
import '@wangeditor/editor/dist/css/style.css'
import { defineComponent, onBeforeUnmount, ref, shallowRef, onMounted, watch } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { systemConfig } from "../../library/config"
import type { IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
import { getToken } from '../../library/cookieUtil'
const token = getToken();
const uploadHeaders = { Authorization: "Bearer " + token }

export default defineComponent({
  components: { Editor, Toolbar },
  props: {
    placeholder: {
      type: String,
      default: () => '请输入内容...',
    },
    modelValue: String,
  },
  setup(props: any, { emit }) {

    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    // 内容 HTML
    const valueHtml = ref(props.modelValue)
    // 模拟 ajax 异步获取内容
    // onMounted(() => {
    //   setTimeout(() => {
    //     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
    //   }, 1500)
    // })
    const toolbarConfig: Partial<IToolbarConfig> = {
    };
    // const toolbarConfig = {}
    // const editorConfig : Partial<IEditorConfig>= {
    //   MENU_CONF:{
    //     uploadImage:[]
    //   },
    //   placeholder: props.placeholder,
    // }


    const editorConfig: Partial<IEditorConfig> = {
      placeholder: props.placeholder,
      MENU_CONF: {
        // insertImage: {
        //   checkImage(src: string) {
        //     //console.log('image src', src);
        //     if (src.indexOf('http') !== 0) {
        //       return '图片网址必须以 http/https 开头';
        //     }
        //     return true;
        //   }
        // },
        uploadImage: {
          server: systemConfig.uploadUrl,
          // form-data fieldName ，默认值 'wangeditor-uploaded-image'
          fieldName: 'file',
          // 单个文件的最大体积限制，默认为 2M
          maxFileSize: 1 * 1024 * 1024, // 1M
          // 最多可上传几个文件，默认为 100
          maxNumberOfFiles: 10,
          // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
          allowedFileTypes: ['image/*'],
          // 将 meta 拼接到 url 参数中，默认 false
          metaWithUrl: false,
          // 自定义增加 http  header
          headers: uploadHeaders,
          // 跨域是否传递 cookie ，默认为 false
          withCredentials: true,
          // 超时时间，默认为 10 秒
          timeout: 5 * 1000, // 5 秒
          // 自定义插入图片
          customInsert(res: any, insertFn: any) {
            //console.log(res)   systemConfig.hostURL + 
            insertFn(res.data.url)
          },
        },
        uploadVideo: {
          server: systemConfig.uploadUrl,
          // form-data fieldName ，默认值 'wangeditor-uploaded-video'
          fieldName: 'file',
          // 单个文件的最大体积限制，默认为 2M
          maxFileSize: 5 * 1024 * 1024, // 5M
          // 最多可上传几个文件，默认为 100
          maxNumberOfFiles: 3,
          // 选择文件时的类型限制，默认为 ['video/*'] 。如不想限制，则设置为 []
          allowedFileTypes: ['video/*'],
          // 将 meta 拼接到 url 参数中，默认 false
          metaWithUrl: false,
          // 自定义增加 http  header
          headers: uploadHeaders,
          // 跨域是否传递 cookie ，默认为 false
          withCredentials: true,
          // 超时时间，默认为 10 秒
          timeout: 5 * 1000, // 5 秒
          // 自定义插入图片
          customInsert(res: any, insertFn: any) {
            //console.log(res)  systemConfig.hostURL + 
            insertFn(res.data.url)
          },
        }
      },
    };

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    const handleCreated = (editor: any) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }

    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    const handleChange = (editor: any) => {
      emit('update:modelValue', editor.getHtml())
    }
    watch(
      () => props.modelValue,
      (value) => {
        const editor = editorRef.value
        if (value == undefined) {
          editor.clear()
          return
        }
        valueHtml.value = value;
      },
    )

    return {
      editorRef,
      valueHtml,
      mode: 'default',
      toolbarConfig,
      editorConfig,
      handleCreated, handleChange
    }
  },
})
</script>